<template>
    <div class="message-area-container" ref="container">
        <DataForm v-on="$listeners" />
        <h3 id="comment-list">
            {{ title }}<span>（{{ subTitle }}）</span>
        </h3>
        <Comment
            v-for="item in list"
            :v-if="list"
            :key="item.id"
            :data="item"
        />
        <!-- 放置加载动画的区域， -->
        <div class="loading" v-loading="isListLoading">{{ text }}</div>
    </div>
</template>

<script>
import Comment from "./Comment"
import DataForm from "./DataForm"

export default {
    components: {
        Comment,
        DataForm
    },
    props: {
        title: {
            type: String,
            default: ""
        },
        subTitle: {
            type: String,
            default: ""
        },
        list: {
            type: Array,
            default: () => []
        },
        isListLoading: {
            type: Boolean,
            default: false
        },
        text: String
    }
}
</script>

<style lang="less">
.message-area-container {
    width: 100%;
    .loading {
        height: 100px;
        position: relative;
        text-align: center;
        color: gray;
        line-height: 100px;
        font-size: 14px;
    }
}
</style>
